import React, { memo, useEffect } from 'react'
import type { FC, ReactNode } from 'react'
import { useAppSelector, useAppDispatch, appShallowEqual } from '@/store'
import { fetchBannerDataAction } from '@/store/modules/recommend'
import Banners from './banners'

interface IProps {
  children?: ReactNode
}

const Recommend: FC<IProps> = () => {
  const { banners } = useAppSelector(
    (store) => store.recommend,
    appShallowEqual
  )

  const dispatch = useAppDispatch()
  useEffect(() => {
    dispatch(fetchBannerDataAction())
  }, [])

  return (
    <div>
      <Banners bannerList={banners} />
    </div>
  )
}

export default memo(Recommend)
